<template>
  <div class="stars-bd">
		<span class="iconfont icon-smile"></span>
    <stars :starNum="Number(starNum)"></stars>
		<span class="score">{{score}}分</span>
	</div>
</template>

<script>
import stars from '../../Sub/Star.vue'
export default {
  name: 'DetailStars',
  components: {
    stars,
  },
  props: {
    starNum: {
      type: Number,
      default () {
        return 0
      }
    },
    score: {
      type: [Number, String],
      default () {
        return 0.0
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/variables.scss';

.stars-bd {
	display: flex;
  align-items: center;
	height: .44rem;
	padding: .03rem .15rem 0;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;

	.icon-smile {
		font-size: .18rem;
		// margin: .08rem .1rem 0 0;
    margin-right: .1rem;
		color: #999;
	}

	.score {
		font-size: .16rem;
		// margin: .1rem 0 0 .15rem;
    margin-left: .1rem;
		color: $defaultOrange;
	}
}	
</style>